<template>
  <a-modal
    title="新增博客信息表"
    width="62%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-tabs default-active-key="1">
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="form"/>
          博客信息
        </span>
        <a-spin :spinning="confirmLoading">
          <a-form :form="form">
            <a-form-item
              label="博客标题"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input
                placeholder="请输入博客标题"
                v-decorator="['blogTitle', {rules: [{required: true, message: '请输入博客标题！'}]}]"/>
            </a-form-item>
            <a-form-item
              label="博客自定义路径url"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input
                placeholder="请输入博客自定义路径url"
                v-decorator="['blogSubUrl', {rules: [{required: false, message: '请输入博客自定义路径url！'}]}]"/>
            </a-form-item>
            <a-form-item
              label="博客前言"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input
                placeholder="请输入博客前言"
                v-decorator="['blogPreface', {rules: [{required: true, message: '请输入博客前言！'}]}]"/>
            </a-form-item>

            <a-form-item
              label="博客分类"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-select
                name="blogCategoryId"
                size="default"
                placeholder="请选择博客分类"
                @change="syncName"
                v-decorator="['blogCategoryId', {rules: [{required: true, message: '请选择博客分类！'}]}]">
                <a-select-option v-for="item in blogCategory" :key="item.categoryId">
                  {{ item.categoryName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              v-show="false"
              label="博客分类"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input
                placeholder="请输入博客分类"
                v-decorator="['blogCategoryName', {rules: [{required: true, message: '请输入博客分类！'}]}]"/>
            </a-form-item>
            <a-form-item
              label="博客标签"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input
                placeholder="请输入博客标签"
                :disabled="true"
                v-decorator="['blogTags', {rules: [{required: true, message: '请输入博客标签！'}]}]"/>

              <a-transfer
                :titles="['所有标签', '博客标签']"
                :list-style="{width: '250px',height: '300px'}"
                :data-source="tagData"
                show-search
                :filter-option="filterOption"
                :target-keys="targetKeys"
                :render="item => item.title"
                @change="handleChange"
                @search="handleSearch"
              />
            </a-form-item>
            <a-form-item
              label="发布状态"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group
                placeholder="请选择发布状态"
                v-decorator="['blogStatus',{rules: [{ required: true, message: '请选择发布状态！' }]}]">
                <a-radio v-for="(item,index) in blogStatusData" :key="index" :value="item.code">{{
                  item.name
                }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="评论状态"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group
                placeholder="请选择评论状态"
                v-decorator="['enableComment',{rules: [{ required: true, message: '请选择评论状态！' }]}]">
                <a-radio v-for="(item,index) in enableCommentData" :key="index" :value="item.code">{{
                  item.name
                }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="删除状态"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group
                placeholder="请选择是否删除"
                v-decorator="['isDeleted',{rules: [{ required: true, message: '请选择是否删除！' }]}]">
                <a-radio v-for="(item,index) in isDeletedData" :key="index" :value="item.code">{{
                  item.name
                }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="阅读量"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input-number
                disabled
                placeholder="自动生成"
                style="width: 100%"
                v-decorator="['blogViews', {rules: [{required: false, message: '请输入阅读量！'}]}]"/>
            </a-form-item>

            <a-form-item
              label="点赞数"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input-number
                disabled
                placeholder="自动生成"
                style="width: 100%"
                v-decorator="['likeNum', {rules: [{required: false, message: '请输入点赞数！'}]}]"/>
            </a-form-item>
          </a-form>
        </a-spin>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="highlight"/>
          博客内容
        </span>
        <mavon-editor :value="this.blogContent" @change="mdChange"/>
      </a-tab-pane>
    </a-tabs>

  </a-modal>
</template>

<script>
import { blogInfoAdd } from '@/api/modular/main/bloginfo/blogInfoManage'
import { blogCategoryList } from '@/api/modular/main/blogcategory/blogCategoryManage'
import { blogTagList } from '@/api/modular/main/blogtag/blogTagManage'

export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      enableCommentData: [],
      blogStatusData: [],
      isDeletedData: [],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      blogCategory: [],
      logCategoryName: '未找到目录名',
      blogContent: '',
      tagData: [],
      targetKeys: []
    }
  },
  methods: {
    // 初始化方法
    add(record) {
      this.visible = true
      const blogStatusOption = this.$options
      this.blogStatusData = blogStatusOption.filters['dictData']('dict_blog_status')
      const enableCommentOption = this.$options
      this.enableCommentData = enableCommentOption.filters['dictData']('dict_enable_comment')
      const isDeletedOption = this.$options
      this.isDeletedData = isDeletedOption.filters['dictData']('dict_is_deleted')
      blogCategoryList().then((res) => {
        this.blogCategory = res.data
      })
      setTimeout(() => {
        this.getMock()
      }, 200)
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof (values[key]) === 'object') {
              values[key] = JSON.stringify(values[key])
            }
          }
          values.blogContent = this.blogContent
          values.blogViews = 0
          blogInfoAdd(values).then((res) => {
            if (res.success) {
              this.$message.success('新增成功')
              this.confirmLoading = false
              this.$emit('ok', values)
              this.handleCancel()
            } else {
              this.$message.error('新增失败' + res.message)
            }
          }).finally((res) => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
    mdChange(e) {
      this.blogContent = e
    },
    syncName(e) {
      for (let i = 0; i < this.blogCategory.length; i++) {
        if (this.blogCategory[i].categoryId === e) {
          this.form.setFieldsValue({
            blogCategoryName: this.blogCategory[i].categoryName
          })
        }
      }
    },
    getMock() {
      const targetKeys = []
      const tagData = []
      let arr = []
      if (this.form.getFieldValue('blogTags')) {
        arr = this.form.getFieldValue('blogTags').split(',')
      }

      blogTagList().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          const data = {
            key: res.data[i].tagId,
            title: res.data[i].tagName,
            description: res.data[i].tagName,
            chosen: false
          }
          for (let j = 0; j < arr.length; j++) {
            if (res.data[i].tagName === arr[j]) {
              data.chosen = true
            }
          }
          if (data.chosen) {
            targetKeys.push(data.key)
          }
          tagData.push(data)
        }
      })

      this.tagData = tagData
      this.targetKeys = targetKeys
    },
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1
    },
    handleChange(targetKeys, direction, moveKeys) {
      const tagData = this.tagData
      this.form.setFieldsValue({
        'blogTags': ''
      })
      for (let i = 0; i < targetKeys.length; i++) {
        for (let j = 0; j < tagData.length; j++) {
          if (tagData[j].key === targetKeys[i]) {
            let pre = this.form.getFieldValue('blogTags')
            if (pre) {
              pre = pre + ','
            }
            this.form.setFieldsValue({
              'blogTags': pre + tagData[j].title
            })
          }
        }
      }

      this.targetKeys = targetKeys
    },
    handleSearch(dir, value) {
      console.log('search:', dir, value)
    }
  }
}
</script>
